<template>
	<view class="storeBox">
		<myHeader :checkIndex="2"></myHeader>
		<view class="searchBox">
			<view class="screenTop">
				<view @click="siteVisiable = true">
					站点：{{ serachInfo.siteName ? serachInfo.siteName : '全部' }}
					<image src="https://www.yongshantuan.cn/images/yongshan/arrow.png" mode=""></image>
				</view>
				<view @click="edificeVisiable = true">
					大厦：{{ serachInfo.addressName ? serachInfo.addressName : '全部' }}
					<image src="https://www.yongshantuan.cn/images/yongshan/arrow.png" mode=""></image>
				</view>
			</view>
			<view class="inputBox">
				<u-input type="text" placeholder="请输入大厦名称" icon="search" v-model="serachInfo.addressName"
					confirm-type="search" @confirm="getList"></u-input>
				<image src="https://www.yongshantuan.cn/images/yongshan/search.png" mode=""></image>
				<view class="searchButton" @click="getList">搜索</view>
			</view>
			<!-- <view class="timeContent">
				<view class="time">
					<u-input type="text" v-model="serachInfo.timeBegin" placeholder="开始时间" :disabled="true" @click="showTimePicker('startTime')"></u-input>
				</view>
				<view class="hr">-</view>
				<view class="time"><u-input type="text" v-model="serachInfo.timeEnd" placeholder="结束时间" :disabled="true" @click="showTimePicker('endTime')"></u-input></view>
			</view> -->
			<view class="timeContent timeBigBox">
				<view class="time"><u-input type="text" v-model="serachInfo.date" placeholder="开始时间" :disabled="true"
						@click="showTimePicker('date')"></u-input></view>
			</view>
		</view>
		<view class="tableContent">
			<view class="table" :style="{ width: trWidthTotal2 + 'rpx' }">
				<view class="tr">
					<view class="td" :style="{ width: tdWidthArr2[1] + 'rpx' }">大厦</view>
					<view class="td" :style="{ width: tdWidthArr2[2] + 'rpx' }" @click="sort(2, 'tod')">今日</view>
					<view class="td" :style="{ width: tdWidthArr2[3] + 'rpx' }" @click="sort(2, 'yes')">昨日</view>
					<view class="td left" :style="{ width: tdWidthArr2[0] + 'rpx' }">站点</view>
				</view>
				<view class="tr" v-for="(item, index) in list2" :key="index">
					<view class="td" :style="{ width: tdWidthArr2[1] + 'rpx' }"
						@click="goToPage('screenOrderWithAddress',item)">{{ item.addressName }}</view>
					<view class="td" :style="{ width: tdWidthArr2[2] + 'rpx' }">
						{{ item.orderCount1 ? item.orderCount1 : 0 }}
					</view>
					<view class="td" :style="{ width: tdWidthArr2[3] + 'rpx' }">
						{{ item.orderCount2 ? item.orderCount2 : 0 }}
					</view>
					<view class="td left" :style="{ width: tdWidthArr2[0] + 'rpx' }">{{ item.siteName }}</view>
				</view>
			</view>
		</view>
		<view class="tableContent">
			<view class="table" :style="{ width: trWidthTotal + 'rpx' }">
				<view class="tr">
					<view class="td" :style="{ width: tdWidthArr[2] + 'rpx' }">配送楼层</view>
					<view class="td" :style="{ width: tdWidthArr[3] + 'rpx' }" @click="sort(1, 'tod')">今日</view>
					<view class="td" :style="{ width: tdWidthArr[4] + 'rpx' }" @click="sort(1, 'yes')">昨日</view>
					<view class="td" :style="{ width: tdWidthArr[1] + 'rpx' }">大厦</view>
					<view class="td left" :style="{ width: tdWidthArr[0] + 'rpx' }">站点</view>
				</view>
				<view class="tr" v-for="(item, index) in list" :key="index">
					<view class="td" :style="{ width: tdWidthArr[2] + 'rpx' }"
						@click="goToPage('screenOrderWithFloor',item)">
						{{ item.pickAddress }}
					</view>
					<view class="td" :style="{ width: tdWidthArr[3] + 'rpx' }">
						{{ item.orderCount1 ? item.orderCount1 : 0 }}
					</view>
					<view class="td" :style="{ width: tdWidthArr[4] + 'rpx' }">
						{{ item.orderCount2 ? item.orderCount2 : 0 }}
					</view>
					<view class="td" :style="{ width: tdWidthArr[1] + 'rpx' }">{{ item.addressName }}</view>
					<view class="td left" :style="{ width: tdWidthArr[0] + 'rpx' }">{{ item.siteName }}</view>
				</view>
			</view>
		</view>
		<view class="selectBox">
			<u-popup mode="bottom" v-model="siteVisiable" :closeable="true" @touchmove.stop.prevent="">
				<view class="selectContent">
					<view class="title">站点列表</view>
					<view class="selList" v-for="(item, index) in siteList" :key="index" @click="selectThis(item)">
						{{ item.name }}
					</view>
				</view>
			</u-popup>
		</view>
		<view class="selectBox">
			<u-popup mode="bottom" v-model="edificeVisiable" :closeable="true" @touchmove.stop.prevent="">
				<view class="selectContent">
					<view class="title">大厦列表</view>
					<view class="selList" v-for="(item, index) in edificeList" :key="index"
						@click="selectThisEdifice(item)">{{ item.addressName }}</view>
				</view>
			</u-popup>
		</view>
		<u-picker v-model="showTime" mode="time" :params="params" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import {
		getSiteList,
		getEdificeList,
		getGlobalData
	} from '../../utils/req/api.js';
	import myHeader from '../../components/header/header.vue';
	export default {
		components: {
			myHeader
		},
		data() {
			return {
				addressName: '',

				list: [],
				tdWidthArr: [],
				trWidthTotal: 0,
				sortState: 'todAsc',
				list2: [],
				tdWidthArr2: [],
				trWidthTotal2: 0,
				sortState2: 'todAsc',

				serachInfo: {
					siteName: '',
					siteId: '',
					addressName: '',
					edificeId: '',
					timeBegin: '',
					timeEnd: '',
					date: ''
				},
				siteVisiable: false,
				siteList: [],
				edificeList: [{
					name: '666'
				}],
				edificeVisiable: false,
				showTime: false,
				timeType: '', //时间picker的触发类别
				params: {
					year: true,
					month: true,
					day: true
					// hour: true,
					// minute: true
				}
			};
		},
		mounted() {
			this.getSiteList();
			this.getEdificeList();

			this.serachInfo.date = `${new Date().getFullYear()}-${
			new Date().getMonth() + 1 > 9 ? new Date().getMonth() + 1 : '0' + parseInt(new Date().getMonth() + 1)
		}-${new Date().getDate()}`;
			this.getList();
		},
		methods: {
			//获取站点列表
			async getSiteList() {
				let res = await getSiteList({
					pageNo: 1,
					pageSize: -1
				});
				console.log('res', res);
				this.siteList = res.data.result;
				this.siteList.unshift({
					name: '全部',
					value: '',
					id: ''
				});
			},
			//获取大厦列表
			async getEdificeList() {
				let res = await getEdificeList({
					pageNo: 1,
					pageSize: -1
				});
				console.log('大厦res', res);
				this.edificeList = res.data.result;
				this.edificeList.unshift({
					addressName: '全部',
					value: '',
					id: ''
				});
			},
			//选择某站点
			selectThis(value) {
				this.serachInfo.siteName = value.name == '全部' ? '' : value.name;
				this.serachInfo.siteId = value.id;
				this.siteVisiable = false;
				this.getList();
			},
			//选择某大厦
			selectThisEdifice(value) {
				this.serachInfo.addressName = value.addressName == '全部' ? '' : value.addressName;
				this.edificeVisiable = false;
				this.getList();
			},
			//展示时间选择picker
			showTimePicker(type) {
				if (type == 'startTime') {
					this.timeType = type;
				}
				if (type == 'endTime') {
					this.timeType = type;
				}
				if (type == 'date') {
					this.timeType = type;
				}
				this.showTime = true;
			},
			//时间picker确认函数
			confirm(e) {
				// let time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
				// if (this.timeType == 'startTime') {
				// 	this.serachInfo.timeBegin = time;
				// }
				// if (this.timeType == 'endTime') {
				// 	this.serachInfo.timeEnd = time;
				// }
				let time = `${e.year}-${e.month}-${e.day}`;
				this.serachInfo.date = time;
				this.getList();
			},
			//获取页面数据
			async getList() {
				let {
					date,
					siteName,
					addressName
				} = this.serachInfo;
				let res = await getGlobalData({
					date,
					siteName,
					addressName
				});
				console.log('dataRes', res);
				this.list = res.data.result.globalData1;
				let trWidthTotal = 0;
				this.tdWidthArr = [4, 2, 2, 2, 2];
				this.list.forEach(item => {
					if (item.siteName && item.siteName.length > this.tdWidthArr[0]) {
						this.tdWidthArr[0] = Math.ceil(item.siteName.length / 2);
					}
					if (item.addressName && item.addressName.length > this.tdWidthArr[1]) {
						this.tdWidthArr[1] = item.addressName.length;
					}
					if (item.pickAddress && item.pickAddress.length > this.tdWidthArr[2]) {
						this.tdWidthArr[2] = Math.ceil(item.pickAddress.length / 2);
					}
					if (item.orderCount1 && item.orderCount1.length > this.tdWidthArr[3]) {
						this.tdWidthArr[3] = item.orderCount1.length;
					}
					if (item.orderCount2 && item.orderCount2.length > this.tdWidthArr[4]) {
						this.tdWidthArr[4] = item.orderCount2.length;
					}
				});
				this.tdWidthArr.forEach((item, index) => {
					this.$set(this.tdWidthArr, index, item * 30 + 20);
					trWidthTotal = trWidthTotal + (item * 30 + 20);
				});
				this.trWidthTotal = trWidthTotal + 20;

				this.list2 = res.data.result.globalData2;
				let trWidthTotal2 = 0;
				this.tdWidthArr2 = [2, 2, 2, 2];
				this.list2.forEach(item => {
					// console.log('item.addressName.length');
					console.log('----', item.addressName)
					if (item.siteName && item.siteName.length > this.tdWidthArr2[0]) {
						this.tdWidthArr2[0] = item.siteName.length;
					}
					if (item.addressName && item.addressName.length > this.tdWidthArr2[1]) {
						this.tdWidthArr2[1] = item.addressName.length + 2;

					}
					if (item.orderCount1 && item.orderCount1.length > this.tdWidthArr2[2]) {
						this.tdWidthArr2[2] = item.orderCount1.length;
					}
					if (item.orderCount2 && item.orderCount2.length > this.tdWidthArr2[3]) {
						this.tdWidthArr2[3] = item.orderCount2.length;
					}
				});
				this.tdWidthArr2.forEach((item, index) => {
					this.$set(this.tdWidthArr2, index, item * 30 + 20);
					trWidthTotal2 = trWidthTotal2 + (item * 30 + 20);
				});
				this.trWidthTotal2 = trWidthTotal2 + 40;
				console.log(this.trWidthTotal2);
			},
			sort(listNum, sortBy) {
				if (listNum === 1) {
					if (this.sortState == 'todAsc') {
						if (sortBy == 'tod') {
							this.sortState = 'todDesc';
							this.sortChange(listNum, sortBy, 'desc');
						} else {
							this.sortState = 'yesAsc';
							this.sortChange(listNum, sortBy, 'asc');
						}
					} else if (this.sortState == 'todDesc') {
						if (sortBy == 'tod') {
							this.sortState = 'todAsc';
							this.sortChange(listNum, sortBy, 'asc');
						} else {
							this.sortState = 'yesAsc';
							this.sortChange(listNum, sortBy, 'asc');
						}
					} else if (this.sortState == 'yesAsc') {
						if (sortBy == 'tod') {
							this.sortState = 'todAsc';
							this.sortChange(listNum, sortBy, 'asc');
						} else {
							this.sortState = 'yesDesc';
							this.sortChange(listNum, sortBy, 'desc');
						}
					} else if (this.sortState == 'yesDesc') {
						if (sortBy == 'tod') {
							this.sortState = 'todAsc';
							this.sortChange(listNum, sortBy, 'asc');
						} else {
							this.sortState = 'yesAsc';
							this.sortChange(listNum, sortBy, 'asc');
						}
					}
				}
				if (listNum === 2) {
					if (this.sortState2 == 'todAsc') {
						if (sortBy == 'tod') {
							this.sortState2 = 'todDesc';
							this.sortChange(listNum, sortBy, 'desc');
						} else {
							this.sortState2 = 'yesAsc';
							this.sortChange(listNum, sortBy, 'asc');
						}
					} else if (this.sortState2 == 'todDesc') {
						if (sortBy == 'tod') {
							this.sortState2 = 'todAsc';
							this.sortChange(listNum, sortBy, 'asc');
						} else {
							this.sortState2 = 'yesAsc';
							this.sortChange(listNum, sortBy, 'asc');
						}
					} else if (this.sortState2 == 'yesAsc') {
						if (sortBy == 'tod') {
							this.sortState2 = 'todAsc';
							this.sortChange(listNum, sortBy, 'asc');
						} else {
							this.sortState2 = 'yesDesc';
							this.sortChange(listNum, sortBy, 'desc');
						}
					} else if (this.sortState2 == 'yesDesc') {
						if (sortBy == 'tod') {
							this.sortState2 = 'todAsc';
							this.sortChange(listNum, sortBy, 'asc');
						} else {
							this.sortState2 = 'yesAsc';
							this.sortChange(listNum, sortBy, 'asc');
						}
					}
				}
			},
			sortChange(listNum, sortBy, sortType) {
				if (listNum === 1) {
					if (sortBy == 'tod') {
						if (sortType == 'asc') {
							this.list = this.list.sort(function(a, b) {
								return a.orderCount1 - b.orderCount1;
							});
						} else {
							this.list = this.list.sort(function(a, b) {
								return b.orderCount1 - a.orderCount1;
							});
						}
					} else {
						if (sortType == 'asc') {
							this.list = this.list.sort(function(a, b) {
								return a.orderCount2 - b.orderCount2;
							});
						} else {
							this.list = this.list.sort(function(a, b) {
								return b.orderCount2 - a.orderCount2;
							});
						}
					}
				}

				if (listNum === 2) {
					if (sortBy == 'tod') {
						if (sortType == 'asc') {
							this.list2 = this.list2.sort(function(a, b) {
								return a.orderCount1 - b.orderCount1;
							});
						} else {
							this.list2 = this.list2.sort(function(a, b) {
								return b.orderCount1 - a.orderCount1;
							});
						}
					} else {
						if (sortType == 'asc') {
							this.list2 = this.list2.sort(function(a, b) {
								return a.orderCount2 - b.orderCount2;
							});
						} else {
							this.list2 = this.list2.sort(function(a, b) {
								return b.orderCount2 - a.orderCount2;
							});
						}
					}
				}
			},
			goToPage(type, data) {
				console.log('data', data);
				let url;
				switch (type) {
					case "screenOrderWithFloor":
						let {
							siteId, supplyAddress
						} = data;
						url = '/pages/order/screenOrder?siteId=' + siteId + '&supplyAddress=' + supplyAddress
						break;
					case "screenOrderWithAddress":
						let {
							addressId,
						} = data;
						url = '/pages/order/screenOrder?addressId=' + addressId
						break;
				}
				uni.navigateTo({
					url
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.storeBox {
		background-color: #f5f5f5;
		padding-bottom: 40rpx;
		min-height: 100vh;
	}

	.searchBox {
		padding: 20rpx 40rpx;
		background-color: #fff;
		border: 1px solid #eee;

		.screenTop {
			@include flex();

			>view {
				width: 50%;
				font-size: 28rpx;
				line-height: 40rpx;
				@include flex();

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
					flex-shrink: 0;
				}
			}
		}

		.inputBigBox {
			@include flex(space-between, center);
		}

		.searchButton {
			background-color: #fa690a;
			color: #fff;
			border-radius: 60rpx;
			font-size: 28rpx;
			line-height: 50rpx;
			padding: 0 20rpx;
			position: absolute;
			right: 10rpx;
			top: 10rpx;
		}

		.timeContent {
			@include flex(space-between, center);
			margin-top: 20rpx;
			flex: 1;

			.time {
				width: 45%;
				background-color: #f5f5f5;
				border-radius: 100rpx;

				/deep/.u-input__input {
					text-align: center;
					font-size: 26rpx !important;
				}
			}

			.hr {
				margin: 0 10rpx;
			}
		}

		.timeBigBox {
			.time {
				width: 100%;
			}
		}

		.inputBox {
			width: 100%;
			position: relative;

			image {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				left: 10rpx;
				top: calc((100% - 40rpx) / 2);
			}

			.u-input {
				font-size: 28rpx;
				line-height: 2;
				background-color: #f5f5f5;
				border-radius: 100rpx;
				padding: 0 60rpx !important;

				.u-input_input {
					color: red;
				}
			}
		}

		>view:nth-child(2) {
			font-size: 28rpx;
			color: #fa690a;
			line-height: 2;
			text-align: center;
			margin-top: 20rpx;
		}
	}

	.tableContent {
		padding: 40rpx 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
		overflow-x: auto;

		.table {
			width: 100%;
			// border: 1px solid;

			.tr {
				width: 100%;
				// @include flex();
				padding: 5rpx 0;
				border-bottom: 1px solid #eee;

				&:last-child {
					border: 0;
				}

				.td {
					display: table-cell;
					font-size: 30rpx;
					// font-size: 28rpx;
					width: 18%;
					min-width: calc(28rpx * 5);
					text-align: center;
					line-height: 2;
					padding: 10rpx;

					&:nth-child(1) {
						text-align: left;
					}

					.but {
						background-color: #fa690a;
						color: #fff;
						border-radius: 10rpx;
					}
				}

				.left {
					text-align: left;
				}

				.error {
					color: #e06262;
				}

				.success {
					color: #7ccf85;
				}

				.normal {
					color: #000;
				}
			}
		}
	}

	.selectContent {
		.title {
			font-size: 32rpx;
			line-height: 2;
			font-weight: bold;
			text-align: center;
			margin-bottom: 14rpx;
		}

		.selList {
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
			font-size: 28rpx;
			line-height: 40rpx;
			padding: 24rpx 0;

			&:last-child {
				border: 0;
			}

			&:nth-child(2) {
				font-weight: bold;
				font-size: 32rpx;
			}
		}
	}
</style>

<style lang="scss">
	.selectBox {
		/deep/.u-drawer-bottom {
			width: 100% !important;
			padding: 36rpx 20rpx 40rpx 20rpx;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			min-height: 30vh;
			max-height: 80vh;
			overflow: auto;
		}

		/deep/ {
			.u-drawer__scroll-view {
				max-height: 80vh;
			}
		}
	}
</style>